<template>
    <div class="jzdItem">
			<div>
			<table class="guigetable" cellpadding="0" cellspacing="0" align="center" width="100%" style="word-break:break-all;font-size:13px;">
				<tr>
					<td align="center" v-for="(item,i) in configList">{{item.title}}</td>
					<td align="center">操作</td>
				</tr>
				
				<tr v-for="(vo,j) in list">
					<td align="center" v-for="(item,i) in configList">
						<el-form-item style="margin-bottom:0" v-if="item.type == 1" :prop="item.field">
							<el-input  v-model="list[j][item.field]" autoComplete="off" clearable  :placeholder="item.title"></el-input>
						</el-form-item>
						<el-form-item style="margin-bottom:0" v-if="item.type == 2" :prop="item.field">
							<el-select style="margin-bottom:0" v-model="list[j][item.field]" filterable clearable :placeholder="item.title">
								<el-option v-for="(vo,index) in item.item.split(',')" :key="index" :label="vo" :value="vo"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item style="margin-bottom:0" v-if="item.type == 6" :prop="item.field">
							<el-switch :active-value="1" :inactive-value="0" v-model="list[j][item.field]"></el-switch>
						</el-form-item>
						<el-form-item style="margin-bottom:0" v-if="item.type == 9" :prop="item.field">
							<el-date-picker  style="margin-bottom:0" type="date" v-model="list[j][item.field]" autoComplete="off" clearable  :placeholder="item.title"></el-date-picker>
						</el-form-item>
						<el-form-item style="margin-bottom:0" v-if="item.type == 13" :prop="item.field">
							<Upload file_type="image" scene="guige" :image.sync="list[j][item.field]"></Upload>
						</el-form-item>
						<el-form-item style="margin-bottom:0" v-if="item.type == 17" :prop="item.field">
							<el-input-number controls-position="right" autoComplete="off" v-model="list[j][item.field]" clearable :min="0" :placeholder="item.title"/>
						</el-form-item>
						<el-form-item style="margin-bottom:0" v-if="item.type == 18" :prop="item.field">
							<Tag :tag_list.sync="list[j][item.field]"></Tag>
						</el-form-item>
					</td>
					<td align="center">
						<el-button type="danger" size="mini" icon="el-icon-close" @click="deleteItem(j)"></el-button>
					</td>
				</tr>
			</table>
			<div>
				<el-button type="info" icon="el-icon-plus" style="padding:5px 7px" size="mini" @click="addItem">追加</el-button>
				<el-button v-if="list.length > 0" type="warning" icon="el-icon-delete" style="padding:5px 7px" size="mini" @click="clearItem">清空</el-button>
			</div>
			</div>
		</div>
</template>

<script>
import Upload from '@/components/common/ImagesUpload.vue'
export default {
    components:{
		Upload,
	},
    props: {
		listitem:{
            type: Array,
        },
		config:{
            type: String,
        },
	},
	watch:{
		list(){
			this.$emit('update:listitem',this.list)
		},
	},
	data(){
		return{
			configList:[],
			list:this.listitem,
		}
	},
	mounted() {
		this.configList = JSON.parse(this.config);
	}, 
	methods: {
		addItem(){
			this.list.push({})
		},
		deleteItem(index){
			this.list.splice(index,1)
		},
		clearItem(){
			this.list = []
		},
	}
}
</script>